<template>
	<view class="content">
		<view class="content-top">
			<view style="height: 130rpx;"></view>
			<view class="top-box">
				<view class="top-title">
					工 卡 经 销 商
				</view>
				<view class="top-btn" @click="godetsils">购买工卡</view>
			</view>
			<!-- 			<view class="dealer" v-if="index == 0" v-for="(item,index) in info.data" :key="index">
				<image :src="'https://web.sunsk.top'+item.qrimg" mode=""></image>
				<view class="dealer-right">
					<view class="right-name">
						{{item.nickname}}
					</view>
					<view class="contact">
						<view v-if="item.weixin!=''">
							微信：{{item.weixin || ' '}}
						</view>
						<view class="contact-text" v-if="item.qq!=''">
							QQ：{{item.qq || '暂无此联系方式'}}
						</view>
					</view>
				</view>
			</view> -->
			<view style="height: 50rpx;"></view>
		</view>
		<view class="factory">
			<u-tabs :inactiveStyle="inactiveStyle" :current="current" :activeStyle="activeStyle" lineColor="#fff"
				:list="regionList" @click="click"></u-tabs>
			<view class="factory-box">
				<view class="factory-item" v-for="(item,index) in list" :key="index">
					<view class="new">NEW</view>
					<view class="item-top">
						<image :src="item.logo" mode=""></image>
						<view class="top-right">
							<view class="right-title">
								{{item.name}}
							</view>
							<view class="refund">
								<view class="refund-item way">
									返款方式
								</view>
								<view class="refund-item">
									每日返本返息
								</view>
							</view>
						</view>
					</view>
					<view class="item-num">
						<view class="num">
							<view>
								{{item.proportion}}
							</view>
							<view class="num-text">
								已出售
							</view>
						</view>
						<view class="num">
							<view>
								{{item.rate}}%
							</view>
							<view class="num-text">
								日产量
							</view>
						</view>
						<view class="num">
							<view>
								{{item.price}}
							</view>
							<view class="num-text">
								云矿石
							</view>
						</view>
						<view class="num">
							<view>
								{{item.day_rec}}
							</view>
							<view class="num-text">
								日收益
							</view>
						</view>
					</view>
					<view class="work">
						<view>
							工作时间{{item.days}}天
						</view>
						<view class="work-btn" @click="goDetails(item)">
							<u-button color="#563AFD" type="primary" text="购买矿机"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curr: 0,
				list: [],
				regionList: [{
					name: '基础产品区',
				}, {
					name: '稳健理财区',
				}, {
					name: '高级产品区'
				}],
				activeStyle: {
					color: '#fff',
					fontSize: '32rpx'
				},
				inactiveStyle: {
					fontSize: '28rpx',
					color: '#999'
				},
				current: 0,
				info: {},
			}
		},
		onShow() {
			this.islogin()
			this.jingottc()
		},
		onLoad() {
			this.getcateList()
		},
		methods: {
			godetsils(){
				uni.navigateTo({
					url:'/pages/factory/detsils-bay/index?id=6&isshow=false'
				})
			},
			islogin() {
				let token = uni.getStorageSync('token')
				if (token == '' || token == undefined) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
					return
				}
			},
			jingottc() {
				let params = {
					pit: 1
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/Jingotc',
					data: params
				}).then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			getcateList() {
				this.$Request({
					method: 'POST',
					url: '/api/Product/cateList',
					data: {}
				}).then(res => {
					if (res.code == 1) {
						this.regionList = res.data;
						this.curr = this.regionList[0].id
						this.getList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getList() {
				this.$Request({
					method: 'POST',
					url: '/api/Product/productList',
					data: {
						page: 1,
						c_id: this.curr
					}
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			click(e) {
				this.current = e.index
				if (this.curr == e.id) return
				this.curr = e.id
				this.getList()
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/factory/details/index?id=' + item.id + '&isshow=false'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #250F5A;
	}
</style>
<style lang="scss" scoped>
	.content-top {
		width: 100%;
		padding: 30rpx;
		background-image: url('../../static/factory/bg.png');
		background-size: 100% 500rpx;
		color: #fff;
		.top-box {
			.top-title {
				font-size: 50rpx;
				font-weight: 600;
			}
			.top-btn {
				width: 200rpx;
				background-color: #fff;
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #7638FC;
				margin-top: 30rpx;
				text-align: center;
			}
		}
		.dealer {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background-color: rgba(255, 255, 255, .24);
			border-radius: 20rpx;
			margin-top: 30rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.dealer-right {
				margin-left: 40rpx;

				.right-name {
					font-size: 32rpx;
					font-weight: 600;
				}

				.contact {
					font-size: 24rpx;
					margin-top: 10rpx;
					display: flex;

					.contact-text {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.factory {
		min-height: 80vh;
		padding: 30rpx;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		background-color: #250F5A;
		margin-top: -30rpx;

		.factory-box {
			margin-top: 30rpx;

			.factory-item {
				position: relative;
				margin-top: 30rpx;
				background-color: rgba(255, 255, 255, .05);
				padding: 30rpx;
				border-radius: 20rpx;

				.new {
					position: absolute;
					right: 0;
					top: 0;
					background-color: rgba(255, 255, 255, .05);
					padding: 10rpx 15rpx;
					border-top-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					color: #F53CDE;
					font-size: 28rpx;
					font-weight: 600;
				}

				.item-top {
					display: flex;
					align-items: center;

					image {
						width: 110rpx;
						height: 110rpx;
					}

					.top-right {
						color: #FFFFFF;
						margin-left: 20rpx;

						.right-title {
							font-size: 32rpx;
							font-weight: 600;
						}

						.refund {
							margin-top: 20rpx;
							display: flex;
							font-size: 24rpx;
							background-color: rgba(255, 255, 255, .05);
							border-radius: 10rpx;
							overflow: hidden;

							.refund-item {
								padding: 10rpx 15rpx;
							}

							.way {
								background: linear-gradient(90deg, #513AFD 0%, #F42FF9 54%, #F85B9F 100%);
							}
						}
					}
				}

				.item-num {
					display: flex;
					justify-content: space-around;
					padding: 20rpx;
					background-color: rgba(255, 255, 255, .05);
					border-radius: 20rpx;
					color: #fff;
					margin-top: 30rpx;
					text-align: center;

					.num {
						font-size: 32rpx;
						font-weight: 600;
					}

					.num-text {
						color: #999;
						font-size: 24rpx;
						margin-top: 15rpx;
					}
				}

				.work {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					color: #999;
					font-size: 24rpx;

					.work-btn {}
				}
			}
		}
	}
</style>